<template>
  <div class="content-wrap">
    <div class="announcement-content">
      <div class="top-panel">
        <Form
          ref="filterForm"
          class="announcement-form"
          v-model="filterData"
          :label-width="100"
        >
          <Row>
            <Col :span="6"
              ><FormItem label="月份">
                <Date-picker
                  type="month"
                  v-model="filterData.searchDate"
                  placeholder="请选择查询日期"
                  class="itemImport"
                ></Date-picker> </FormItem
            ></Col>
            <Col >
              <FormItem label="伙食单位" class="mr_48">
                <Select style="width: 200px" v-model="filterData.unitCode">
                  <Option
                    v-for="item in unitList"
                    :key="item.id"
                    :value="item.unitCode"
                    >{{ item.unitName }}</Option
                  >
                </Select>
              </FormItem>
            </Col>
            <Col class="button-wrap">
              <Button type="primary" class="mr_24"  @click="pageOption.currentPage = 1;handleSubmit()">查询</Button>
              <Button type="default" @click="handleReset()" 
                >重置
              </Button>
            </Col>
          </Row>
        </Form>
      </div>
      <div class="bottom-panel">
        <cusTable
          border
          :loading="loading"
          :columns="columns"
          :data="dataList"
          :bottomClass="['page-wrap']"
        >
          <template slot-scope="{ row }" slot="operation">
            <Button type="primary" size="small" @click="goToDetaile(row)">详情</Button>
          </template>
        </cusTable>
        <div class="page-wrap">
          <Page
            show-sizer
            show-elevator
            show-total
            class="mt_20"
            :current="pageOption.currentPage"
            :total="pageOption.total"
            @on-change="changeCurrentPage"
            @on-page-size-change="changePageSize"
          ></Page>
        </div>
      </div>
    </div>
    <detail-drawer ref="detailDrawer"></detail-drawer>
  </div>
</template>
<script>
import { getSubCanteenList } from "@/api/organ/organization";
import { getMonthlyMealsPublishList } from "@/api/businessAccountingApi/essentialInformationApi";
import detailDrawer from "./components/detailDrawer.vue";
export default {
  components: { detailDrawer },
  data() {
    return {
      loading: true,
      filterData: {
        unitCode: "all",
        searchDate: new Date(
          new Date().getFullYear(),
          new Date().getMonth() - 1,
          1
        ),
      },
      unitList: [],
      columns: [
        {
          title: "序号",
          width: 70,
          type: "index",
          align: "center",
        },
        {
          title: "伙食单位",
          key: "unitName",
          align: "center",
        },
        {
          title: "月份",
          key: "applyYearMonth",
          align: "center",
        },
        {
          title: "提交时间",
          key: "submitTime",
          align: "center",
        },
        {
          title: "备注",
          key: "remark",
          align: "center",
        },
        {
          title: "操作",
          slot: "operation",
          align: "center",
        },
      ],
      dataList: [],
      tableHeight: 0,
      pageOption: {
        pageSize: 10,
        currentPage: 1,
        total: 100,
      },
    };
  },
  mounted() {
    if(this.$route.query.reportForms) this.goToDetaile(this.$route.query.reportForms)
    setTimeout(() => {
      this.tableHeight = window.innerHeight - 325; // 表格自适应高度
    }, 100);
    window.addEventListener("resize", this.tableHeightChange, true);
    this.getSubCanteenList();
    this.getMouthMealList();
  },
  methods: {
    resetPageInfo() {
      this.pageOption.pageSize = 10;
      this.pageOption.currentPage = 1;
      this.pageOption.total = 0;
    },
    goToDetaile(row) {
      this.$refs.detailDrawer.show(row);
    },
    changeCurrentPage(data) {
      this.pageOption.currentPage = data;
    },
    changePageSize(data) {
      this.pageOption.pageSize = data;
      this.pageOption.currentPage = 1;
    },
    handleSubmit() {
      this.getMouthMealList();
    },
    handleReset() {
      this.filterData.unitCode = "all";
      this.filterData.searchDate = new Date(
        new Date().getFullYear(),
        new Date().getMonth() - 1,
        1
      );
      this.getMouthMealList();
    },
    getMouthMealList() {
      this.loading = true;
      let params = {};
      let selectDate = this.filterData.searchDate
        ? new Date(this.filterData.searchDate)
        : new Date();
      params.unitCode = this.filterData.unitCode;
      params.startDate = new Date(
        selectDate.getFullYear(),
        selectDate.getMonth(),
        1
      ).Format("yyyy-MM-dd");
      params.stopDate = new Date(
        selectDate.getFullYear(),
        selectDate.getMonth() + 1,
        0
      ).Format("yyyy-MM-dd");
      params.currentPage = this.pageOption.currentPage;
      params.pageSize = this.pageOption.pageSize;
      getMonthlyMealsPublishList(params).then((res) => {
        this.loading = false;
        if (res.code == 1) {
          this.dataList = res.data.mealsPublishVos.list;
          this.pageOption.currentPage = res.data.mealsPublishVos.currentPage;
          this.pageOption.pageSize = res.data.mealsPublishVos.pageSize;
          this.pageOption.total = res.data.mealsPublishVos.total;
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    getSubCanteenList() {
      getSubCanteenList().then((res) => {
        if (res.code == 1) {
          let unitAll = [{ unitCode: "all", unitName: "全部" }];
          this.unitList = [...unitAll, ...res.data.list];
          this.filterData.unitCode = "all";
        }
      });
    },
    tableHeightChange() {
      this.tableHeight = 0;
      setTimeout(() => {
        this.tableHeight = window.innerHeight - 260; // 表格自适应高度
        console.log(this.tableHeight);
      }, 100);
    },
  },
  destroyed() {
    window.removeEventListener("resize", this.tableHeightChange, true);
  },
};
</script>
<style lang="less" scoped>
@import "./index.less";
</style>
